<template>
    <div class="modal-container">
        <!-- 左边 -->
        <ul class="first-catalog">
            <li v-for="(v,i) in catalogList" @click.stop="change(i,v)" :key="i" :class="{active: fid === v.id}">{{v.name}}</li>
        </ul>
        <!-- 右边 -->
        <div class="right-catalog">
            <p @click.stop="goCatalogDetail('all')" class="hover">{{lookAll}}<van-icon name="arrow" style="margin-left:3px;margin-top:2px"/></p>
            <template v-if="secondCatalog.length>0">
                <div class="second-catalog" v-for="(item, i) in secondCatalog" :key="i">
                    <p @click.stop="goCatalogDetail('single', item, fid)" class="hover margin-bottom10">{{item.name}}<van-icon name="arrow" style="margin-left:3px;margin-top:1px"/></p>
                    <ul class="btn-catalog">
                        <li :class="{active: activeCatalogID === v.id}" @click.stop="goCatalogDetail('single', v, fid)" v-for="(v, index) in item.children" :key="index">{{v.name}}</li>
                    </ul>
                </div>
            </template>
            <div v-else style="height:calc(100% - 47px);">
                <div class="box-table" style="width:100%;height:100%;">
                    <div class="box-table-cell" style="text-align: center;">
                        <div class="no-data">
                            <img src="../../../../static/images/no-data.png" alt=""/>
                            <div class="color999">{{ $t("no_data") }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Icon } from 'vant';
export default {
    name: 'catalog',
    components: {
        [Icon.name]: Icon
    },
    props: {
        catalogList: { // 目录列表
            type: Array,
            default() {
                return [];
            }
        },
        activeFId: { // 激活目录--一级目录ID
            type: Number,
            default() {
                return null;
            }
        },
        activeCId: { // 激活目录--三级目录ID
            type: Number,
            default() {
                return null;
            }
        },
        lookAll: {
            type: String,
            default() {
                return this.$t('look_all_course');
            }
        }
    },
    data() {
        return {
            activeCatalogID: null,
            secondCatalog: [],
            fid: null, // 一级目录id
            fTitle: ''
        };
    },
    mounted() {
        let currentIndex = 0;
        if (this.activeFId) {
            this.fid = this.activeFId;
            this.activeCatalogID = this.activeCId ? this.activeCId : null;
            currentIndex = this.catalogList.indexOf(this.catalogList.filter(item => item.id === this.activeFId)[0]);
        } else {
            // 一级目录ID
            this.fid = this.catalogList[currentIndex].id;
        }
        // 二级目录
        this.secondCatalog = this.catalogList[currentIndex].children;
        // 一级目录标题
        this.fTitle = this.catalogList[currentIndex].name;
    },
    methods: {
        /**
         * 一级目录切换
         * */
        change(i, item) {
            this.secondCatalog = this.catalogList[i].children;
            this.fTitle = item.name;
            this.fid = item.id;
        },
        /**
         * 三级目录进入目录二级页
         * */
        goCatalogDetail(type, item, fid) {
            if (type === 'all') {
                this.$emit('goDetail', {name: this.fTitle, id: this.fid}, this.fid);
            } else {
                this.$emit('goDetail', item, fid);
            }
        }
    }
};
</script>
<style scoped lang="less">
.modal-container{
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    .first-catalog{
        width: 30%;
        height: 100%;
        background: #F9F9F9;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
        li{
            text-align: center;
            padding: 15px;
            color: #999999;
        }
        .active{
            color: #075ebb;
            background: #fff;
        }
    }
    .right-catalog{
        flex:1;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
        padding: 0 10px 15px;
        >p{
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }
        p{
            font-weight: 600;
            display: flex;
            align-items: center;
        }
        .second-catalog{
            margin-top: 20px;
            .btn-catalog{
                display: flex;
                flex-wrap: wrap;
                li{
                    border-radius: 5px;
                    border: 1px solid #999999;
                    padding: 5px 8px;
                    margin-right: 10px;
                    margin-bottom: 7px;
                    font-size: 11px;
                    line-height: 1;
                }
                .active{
                    color: #fff;
                    background: #075ebb;
                    border:1px solid #075ebb;
                }
            }
        }
        .hover:active{
            background: #FAFAFA;
        }
    }
}
</style>
